<template>
  <view class="complaint-categories-page">
    <!-- 分类统计 -->
    <view class="categories-stats">
      <view class="stats-header">
        <text class="stats-title">投诉分类统计</text>
        <text class="stats-subtitle">按类型查看投诉分布情况</text>
      </view>
      
      <view class="stats-grid">
        <view 
          v-for="category in categories" 
          :key="category.type"
          class="stat-card"
          :class="{ active: selectedCategory === category.type }"
          @click="selectCategory(category.type)"
        >
          <view class="stat-icon">{{ category.icon }}</view>
          <view class="stat-info">
            <text class="stat-name">{{ category.name }}</text>
            <text class="stat-count">{{ category.count }}件</text>
          </view>
          <view class="stat-percentage">{{ category.percentage }}%</view>
        </view>
      </view>
    </view>

    <!-- 分类详情 -->
    <view class="category-detail" v-if="selectedCategory">
      <view class="detail-header">
        <text class="detail-title">{{ getCategoryName(selectedCategory) }}</text>
        <text class="detail-count">共{{ getCategoryCount(selectedCategory) }}件投诉</text>
      </view>

      <view class="detail-stats">
        <view class="detail-stat">
          <text class="stat-value">{{ getStatusCount(selectedCategory, 'pending') }}</text>
          <text class="stat-label">待处理</text>
        </view>
        <view class="detail-stat">
          <text class="stat-value">{{ getStatusCount(selectedCategory, 'processing') }}</text>
          <text class="stat-label">处理中</text>
        </view>
        <view class="detail-stat">
          <text class="stat-value">{{ getStatusCount(selectedCategory, 'completed') }}</text>
          <text class="stat-label">已完成</text>
        </view>
      </view>

      <!-- 投诉列表 -->
      <view class="complaints-list">
        <view class="list-header">
          <text class="list-title">投诉列表</text>
          <text class="list-subtitle">按时间倒序排列</text>
        </view>

        <view v-if="getCategoryComplaints(selectedCategory).length > 0" class="list-content">
          <view 
            v-for="complaint in getCategoryComplaints(selectedCategory)" 
            :key="complaint.id"
            class="complaint-item"
            @click="viewComplaintDetail(complaint)"
          >
            <view class="item-header">
              <text class="item-title">{{ complaint.title }}</text>
              <text class="item-status" :class="getStatusClass(complaint.status)">
                {{ complaint.statusText }}
              </text>
            </view>
            
            <view class="item-content">
              <text class="item-desc">{{ complaint.description }}</text>
            </view>
            
            <view class="item-footer">
              <view class="item-info">
                <text class="item-time">{{ complaint.createTime }}</text>
                <text class="item-location">{{ complaint.location }}</text>
              </view>
              <view class="item-urgency">
                <text class="urgency-badge" :class="getUrgencyClass(complaint.urgency)">
                  {{ complaint.urgencyText }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <view v-else class="empty-list">
          <view class="empty-icon">📝</view>
          <text class="empty-title">暂无投诉</text>
          <text class="empty-desc">该分类下还没有投诉记录</text>
        </view>
      </view>
    </view>

    <!-- 选择分类提示 -->
    <view v-else class="select-prompt">
      <view class="prompt-icon emoji-text">📊</view>
      <text class="prompt-title">选择分类查看详情</text>
      <text class="prompt-desc">点击上方的分类卡片，查看该分类下的详细投诉信息</text>
    </view>
  </view>
</template>

<script setup>
/**
 * 投诉分类页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 投诉建议分类页面，按类型展示投诉统计和详情
 */

import { ref, computed, onMounted } from 'vue'

// 投诉分类数据
const categories = ref([
  {
    type: 'facility',
    name: '设施问题',
    icon: '🏠',
    count: 0,
    percentage: 0
  },
  {
    type: 'security',
    name: '安全问题',
    icon: '🛡️',
    count: 0,
    percentage: 0
  },
  {
    type: 'environment',
    name: '环境问题',
    icon: '🌳',
    count: 0,
    percentage: 0
  },
  {
    type: 'noise',
    name: '噪音问题',
    icon: '🔊',
    count: 0,
    percentage: 0
  },
  {
    type: 'service',
    name: '服务问题',
    icon: '👥',
    count: 0,
    percentage: 0
  },
  {
    type: 'other',
    name: '其他问题',
    icon: '❓',
    count: 0,
    percentage: 0
  }
])

// 选中的分类
const selectedCategory = ref('')

// 投诉记录数据
const complaintRecords = ref([
  {
    id: 1,
    number: 'TS20250130001',
    title: '小区路灯不亮',
    description: '小区内多个路灯不亮，影响夜间出行安全，希望尽快修复',
    type: 'facility',
    typeText: '设施问题',
    urgency: '2',
    urgencyText: '紧急',
    status: 'pending',
    statusText: '待处理',
    createTime: '2025-01-30 14:30',
    location: '小区主干道',
    phone: '138****1234',
    images: []
  },
  {
    id: 2,
    number: 'TS20250129001',
    title: '电梯故障',
    description: '3号楼2单元电梯经常故障，有时会卡在中间楼层，存在安全隐患',
    type: 'facility',
    typeText: '设施问题',
    urgency: '3',
    urgencyText: '特急',
    status: 'processing',
    statusText: '处理中',
    createTime: '2025-01-29 09:15',
    location: '3号楼2单元',
    phone: '138****1234',
    images: []
  },
  {
    id: 3,
    number: 'TS20250128001',
    title: '噪音扰民',
    description: '楼下装修噪音太大，影响正常休息，希望协调施工时间',
    type: 'noise',
    typeText: '噪音问题',
    urgency: '1',
    urgencyText: '一般',
    status: 'completed',
    statusText: '已完成',
    createTime: '2025-01-28 16:45',
    location: '2号楼1单元',
    phone: '138****1234',
    images: []
  },
  {
    id: 4,
    number: 'TS20250127001',
    title: '垃圾清理不及时',
    description: '小区垃圾桶清理不够及时，有时会溢出，影响环境卫生',
    type: 'environment',
    typeText: '环境问题',
    urgency: '1',
    urgencyText: '一般',
    status: 'completed',
    statusText: '已完成',
    createTime: '2025-01-27 11:20',
    location: '小区公共区域',
    phone: '138****1234',
    images: []
  },
  {
    id: 5,
    number: 'TS20250126001',
    title: '门禁系统故障',
    description: '小区大门门禁系统经常故障，有时无法正常开门，影响进出',
    type: 'security',
    typeText: '安全问题',
    urgency: '2',
    urgencyText: '紧急',
    status: 'processing',
    statusText: '处理中',
    createTime: '2025-01-26 08:30',
    location: '小区大门',
    phone: '138****1234',
    images: []
  }
])

// 选择分类
const selectCategory = (type) => {
  selectedCategory.value = type
}

// 获取分类名称
const getCategoryName = (type) => {
  const category = categories.value.find(c => c.type === type)
  return category ? category.name : ''
}

// 获取分类投诉数量
const getCategoryCount = (type) => {
  const category = categories.value.find(c => c.type === type)
  return category ? category.count : 0
}

// 获取分类下指定状态的投诉数量
const getStatusCount = (type, status) => {
  return complaintRecords.value.filter(c => c.type === type && c.status === status).length
}

// 获取分类下的投诉列表
const getCategoryComplaints = (type) => {
  return complaintRecords.value.filter(c => c.type === type)
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    'pending': 'status-pending',
    'processing': 'status-processing',
    'completed': 'status-completed'
  }
  return classMap[status] || 'status-pending'
}

// 获取紧急程度样式类
const getUrgencyClass = (urgency) => {
  const classMap = {
    '1': 'urgency-low',
    '2': 'urgency-medium',
    '3': 'urgency-high'
  }
  return classMap[urgency] || 'urgency-low'
}

// 查看投诉详情
const viewComplaintDetail = (complaint) => {
  uni.navigateTo({
    url: `/pages/complaint/detail?id=${complaint.id}`
  })
}

// 更新分类统计
const updateCategoryStats = () => {
  const total = complaintRecords.value.length
  
  categories.value.forEach(category => {
    const count = complaintRecords.value.filter(c => c.type === category.type).length
    category.count = count
    category.percentage = total > 0 ? Math.round((count / total) * 100) : 0
  })
}

// 页面加载
onMounted(() => {
  console.log('投诉分类页面已加载')
  
  // 从本地存储加载数据（演示用）
  const localComplaints = uni.getStorageSync('complaints')
  if (localComplaints && localComplaints.length > 0) {
    complaintRecords.value.unshift(...localComplaints)
  }
  
  updateCategoryStats()
})
</script>

<style scoped>
.complaint-categories-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 40rpx;
}

.categories-stats {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.stats-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.stats-subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.stat-card.active {
  background: #e3f2fd;
  border-color: #2196f3;
}

.stat-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.stat-info {
  flex: 1;
}

.stat-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.stat-count {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.stat-percentage {
  font-size: 32rpx;
  font-weight: bold;
  color: #2196f3;
}

.category-detail {
  background: #fff;
  margin: 0 30rpx 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.detail-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.detail-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.detail-count {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.detail-stats {
  display: flex;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.detail-stat {
  flex: 1;
  text-align: center;
  padding: 30rpx 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #2196f3;
  margin-bottom: 10rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.complaints-list {
  border-top: 2rpx solid #f0f0f0;
  padding-top: 30rpx;
}

.list-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.list-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.list-subtitle {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.list-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.complaint-item {
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #2196f3;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.item-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.item-status {
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.status-pending {
  background: #fff3e0;
  color: #ff9800;
}

.status-processing {
  background: #e3f2fd;
  color: #2196f3;
}

.status-completed {
  background: #e8f5e8;
  color: #4caf50;
}

.item-content {
  margin-bottom: 15rpx;
}

.item-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.item-time {
  font-size: 22rpx;
  color: #999;
}

.item-location {
  font-size: 22rpx;
  color: #666;
}

.urgency-badge {
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.urgency-low {
  background: #e8f5e8;
  color: #4caf50;
}

.urgency-medium {
  background: #fff3e0;
  color: #ff9800;
}

.urgency-high {
  background: #ffebee;
  color: #f44336;
}

.empty-list {
  text-align: center;
  padding: 80rpx 40rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.empty-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.select-prompt {
  background: #fff;
  margin: 0 30rpx;
  padding: 80rpx 40rpx;
  border-radius: 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.prompt-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.prompt-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.prompt-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}
</style>
